<template>
	<view class="details_warp">
		 <view class="details_header_warp">
			 <view class="details_header_title_warp">{{$t('details.title')}}</view>
			 <view style="">
			 	<up-image src="/static/details/img_sc.png" width="150" height="120" bgColor="#f1f6ff00"></up-image>
			 </view>
		 </view>
		 <view class="details_content_warp">
			 <view class="details_content_title">{{$t("common.select.card")}}</view>
			 <CardComm @getSelectCard="getSelectCard"/>
			 <view class="details_history_title">{{$t("details.historical.details")}}</view>
			 <view class="details_history_content">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 220px)'}">
					<view class="history_content_item" v-for="item in historyData" :key="item.id" v-if="historyData && historyData.length!==0">
						<view>
							<view class="history_content_item_title">{{$t("common.order")}}{{item.orderNo}}</view>
							<view class="history_content_item_time">{{formatDate(item.createTime)}}</view>
						</view>
						<view>
							<view class="history_content_item_amount">
							 	￥ <text style="font-weight: bold;font-size: 36rpx;">{{item.transAmount}}</text>
							</view>
							<view class="history_content_item_time">{{getValue(TRANS_STATUS,item.transStatus)}}</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
						<up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
						<view class="not_data_msg_warp">{{$t("details.historical.details.no")}}</view>
					</view>
					<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
				</scroll-view>
			 </view>
		 </view>
	</view>
</template>

<script>
	import { getCardTradeList } from '@/api/finance.js';
	import { getMyCards } from '@/api/card.js';
	import { getValue,BALANCE_TRANSACTION_TYPE,TRANS_STATUS} from '@/utils/enumUtils.js';
	import CardComm from '@/components/card_comm.vue';
	import { formatDate } from '@/utils/index.js';
	
	export default {
		components:{CardComm},
		computed: {
		    getValue() {
		      return getValue;
		    },
		    BALANCE_TRANSACTION_TYPE() {
		      return BALANCE_TRANSACTION_TYPE;
		    },
			TRANS_STATUS() {
			  return TRANS_STATUS;
			},
		},
		data() {
			return {
				historyData:[],
				form:{
					cardId:0,//
					page:1,//
					pageSize:15,//
				},
				loading:false,
			};
		},
		onShow() {
			this.loadData();
		},
		methods: {
			formatDate,
			getSelectCard(item){
				console.log("item",item);
				this.form.cardId = item.id
				this.form.page = 1;
				this.loadData(); // 加载更多数据
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			 
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if(newData.entitys && newData.entitys.length !==0){
					this.historyData = [...this.historyData, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData(page, pageSize) {
				const params = {
					cardId:this.form.cardId,
					page,
					pageSize,
				}
				// 消费记录
				const resp = await getCardTradeList(params);
				console.log("resprespresp",resp);
				if(resp && resp.bizcode === 100 && resp.data){
					return resp.data;
				}else{
					return [];
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.details_warp{
	height: calc(100vh - 0rpx);
	// overflow: hidden;
	position: relative;
	.details_header_warp{
		// height: 300rpx;
		background: $app-policy-color;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		padding: 120rpx 60rpx 30rpx 40rpx;
		.details_header_title_warp{
			font-weight: 800;
			font-size: 44rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}
	.details_content_warp{
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: absolute;
		top: 256rpx;
		width: calc(100% - 60rpx);
		padding: 30rpx 30rpx 0 30rpx;
		height: calc(100vh - 286rpx);
		overflow: hidden;
		.details_content_title{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
		
		.details_history_title{
			font-size: 28rpx;
			color: #666666;
			margin-top: 30rpx;
		}
		.details_history_content{
			margin-top: 20rpx;
			height: calc(100vh - 294px);
			overflow: auto;
			.history_content_item{
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid  #EEEEEE;
				padding: 30rpx 0;
			}
			.history_content_item_title{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.history_content_item_time{
				font-weight: 300;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
			.history_content_item_amount{
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
}
</style>
